<script setup>
import { ref } from "vue";
import gsap from "gsap";

const show = ref(true);

function toggle() {
  show.value = !show.value;
}

setTimeout(() => {
  show.value = true;
}, 1000);

function onEnter(el, done) {
  gsap.fromTo(el,
    {
      x: 0,
    },
    {
      duration: 2,
      x: 0,
      ease: "none",
      onComplete: done,
    });
}

function onLeave(el, done) {
  gsap.to(el, {
    duration: 0.7,
    delay: 0.2,
    x: 0,
    ease: "none",
  });
}
</script>

<template>
  <div @click="toggle">点击按钮切换</div>
  <Transition @enter="onEnter" @leave="onLeave" :css="false" appear>
    <div v-if="show" class="box">hsodhowahohw</div>
  </Transition>

  <div class="box" v-show="show">aaaaa</div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
  margin-top: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(200px);
}
</style>
